<template>
  <div class="home-goods">
    <van-cell :title="titleName" />
    <van-list
      v-model="loading"
      :finished="isFinished"
      finished-text="没有更多了"
      :immediate-check="false"
      @load="onReachBottom"
    >
      <van-empty v-if="goodsList.length == 0" :description="description" />
      <div v-else class="main">
        <div v-for="(item,index) in goodsList" :key="index" style="display: flex;width:100%;margin-top: 5px;background-color: #fff;">
          <template v-if="item.type!=3">
          <!-- @change="changes(index,checkedList[index])" -->
          <van-checkbox
            v-model="checkedList[index]"
            icon-size="18px"
            :disabled="invalid"
            :checked-color="variables.theme"
            style="padding:0 10px 0 16px; background-color: white;"

            @click="handleCheckBox($event, index)"
          />
          <van-card
            :desc="item.orderCode"
            :title="item.goodsName"
            :thumb="item.goodsImg"
            :price="item.goodsPrice | yuan"
            :origin-price="item.goodsMarketPrice | yuan"
            :is-checked="item.checked"
            @handleDelete="handleDelete"
            @changeNum="changeNum"
          >
            <!-- <template #tags>
              <div class="tags">
                <div class="buy" style="display: flex;align-items: center;margin-top: 10px">
                  <div class="title" style="color: #4A73FD;">卖方：</div>
                  <div class="info">{{ item.saleUserName }}</div>
                </div>
                <div class="sale" style="display: flex;align-items: center;margin-top: 5px">
                  <div class="title" style="color: #4A73FD;">买方：</div>
                  <div class="info">暂无买方</div>
                </div>
              </div>

            </template> -->
          </van-card>
        </template>
        </div>

      </div>
    </van-list>
  </div>
</template>

<script>
import variables from '@/styles/variables.scss'

export default {
  model: {
    prop: 'isLoading'
  },
  props: {
    description:{
      type: String,
      default: '联系店长上架吧~'
    },
    goodsList: {
      type: Array,
      default() {
        return []
      }
    },
    index: {
      type: Number,
      default: 0
    },
    titleName: {
      type: String,
      default: ''
    },
    isLoading: {
      type: Boolean,
      default: false
    },
    isFinished: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      checkedList: []
    }
  },
  computed: {
    variables() {
      return variables
    },
    loading: {
      get() {
        return this.isLoading
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    // checked: {
    //   get() {
    //     return this.isChecked
    //   },
    //   set(val) {
    //     this.$emit('input', { val, index: this.index })
    //   }
    // },
    maxNumber() {
      return this.maxNum > this.num ? this.maxNum : this.num
    },
    invalid() {
      const valid = this.maxNum < this.num
      return valid
    }
  },
  methods: {
    handleCheckBox(e, index) {
      console.log(this.checkedList[index])
      if (this.checkedList[index]) {
        const checked = !this.checkedList[index].checked

        this.checkedList.map((item, index) => {
          this.$set(this.checkedList, index, false)
        })
        this.$set(this.checkedList, index, checked)
        this.$emit('handleCheckbox', checked ? index : -1, checked)
      } else {
        this.checkedList.map((item, index) => {
          this.$set(this.checkedList, index, false)
        })
        this.$set(this.checkedList, index, false)
      }
    },
    onReachBottom() {
      this.$emit('onReachBottom')
    },
    handleDelete(index) {
      this.$toast.loading({
        message: '加载中...',
        overlay: true,
        duration: 0,
        forbidClick: true
      })
    },
    changeNum(id, num) {
      let newval
      this.goodsList.forEach(item => {
        if (item.id === id) {
          item.number = num
          newval = item
        }
      })
      const index = this.goodsList.findIndex(item => {
        return item.id === id
      })
      // vue动态更新list集合
      this.$set(this.goodsList, index, newval)
    },
    itemClick(goodsId) {
      this.$router.push({
        path: `cgDetail/${goodsId}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.home-goods {
  margin-top: 24px;
  .main {
    background: #f0f0f0;
    padding-bottom: 50px;
  }
}
.invalid {
  position: absolute;
  width: 120px;
  height: 120px;
  text-align: center;
  line-height: 120px;
  border-radius: 50%;
  background-color: #554f4f;
  color: white;
  top: 40px;
  left: 60px;
  filter: opacity(80%);
}
.van-card__bottom{
  margin-top: 10px
}
.van-card__title{
  height: 56px;
  line-height: 28px;
}
</style>
